import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu } from 'antd';
import { HomeOutlined, AppstoreOutlined, BarsOutlined, ToolOutlined, UserOutlined, SafetyOutlined, AreaChartOutlined, BarChartOutlined, LineChartOutlined, PieChartOutlined } from '@ant-design/icons';
import './index.less';
import logo from '../../assets/images/logo.png';

type MenuType = typeof Menu;

const { SubMenu }: MenuType = Menu;

// 左侧导航的组件
const LeftNav: React.FC = () => {
    const location = useLocation();
    let pathName: string = location.pathname.replace(/^\/admin(\/charts)?\/|(?<=product)\/.+$/g, '');
    const pathMenuNames: string[] | undefined = ['category', 'product'].includes(pathName) ? ['product-menu'] : ['bar', 'line', 'pie'].includes(pathName) ? ['charts-menu'] : [];
    return (
        <div className="left-nav">
            <Link className="left-nav-header" to="/">
                <img src={logo} alt="logo" />
                <h1>管理后台</h1>
            </Link>
            <Menu
                selectedKeys={[pathName]}
                defaultOpenKeys={pathMenuNames}
                mode="inline"
                theme="dark"
            >
                <Menu.Item key="home" icon={<HomeOutlined />}>
                    <Link to="home">首页</Link>
                </Menu.Item>
                <SubMenu key="product-menu" icon={<AppstoreOutlined />} title="商品">
                    <Menu.Item key="category" icon={<BarsOutlined />}>
                        <Link to="category">品类管理</Link>
                    </Menu.Item>
                    <Menu.Item key="product" icon={<ToolOutlined />}>
                        <Link to="product">商品管理</Link>
                    </Menu.Item>
                </SubMenu>
                <Menu.Item key="user" icon={<UserOutlined />}>
                    <Link to="user">用户管理</Link>
                </Menu.Item>
                <Menu.Item key="role" icon={<SafetyOutlined />}>
                    <Link to="role">角色管理</Link>
                </Menu.Item>
                <SubMenu key="charts-menu" icon={<AreaChartOutlined />} title="图形图表">
                    <Menu.Item key="bar" icon={<BarChartOutlined />}>
                        <Link to="charts/bar">柱形图</Link>
                    </Menu.Item>
                    <Menu.Item key="line" icon={<LineChartOutlined />}>
                        <Link to="charts/line">折线图</Link>
                    </Menu.Item>
                    <Menu.Item key="pie" icon={<PieChartOutlined />}>
                        <Link to="charts/pie">饼图</Link>
                    </Menu.Item>
                </SubMenu>
            </Menu>
        </div>
    );
};

export default LeftNav;